import React from "react";
import { useHistory } from "react-router-dom";
import { Form,Input,Button } from "antd";
import type {ILogin} from "@/myTypes"
import {loginCheckApi} from "@/api/user"

// hooks 只能在函数式组件里或者其它hooks里调用。

export default function Login() {
  const history = useHistory(); // useHistory会把 路由上下文的 history钩过来。这个就是 this.props.history

  const loginCheck=(values:ILogin)=>{
    loginCheckApi(values)
    .then(res=>{
      if(res.data.length===1){
        // 登录成功！
        // 1、保存用户名：
        sessionStorage.setItem("username",res.data[0].username);

        // 2、保存token

        // 3、保存权限信息：
        sessionStorage.setItem("checkedKeys",JSON.stringify(res.data[0].checkedKeys));

        // 3、跳转首页
        history.push("/Admin");
      }
    })
  }

  return (
    <div>
      <h1>登录页面</h1>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={loginCheck}
        autoComplete="off"
      >
        <Form.Item
          label="账户名"
          name="username"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input  />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: "Please input your password!" }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            登录 
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
